﻿@{
    ViewBag.Title = "RemoveEffect";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<style type="text/css">
    h1 {
        line-height: 60px;
        padding: 0;
        margin: 0 0 15px 0;
        text-align: center;
        color: #333;
        font-weight: 300;
    }
    .frame {
        width: 700px;
        margin: 50px auto auto auto;
        background-color: #FFF;
        box-shadow: #000 3px 3px 2px;
        border-radius: 10px;
        padding: 20px;
        text-align: center;
        color: #008000;
    }
</style>

<h2>Remove Effect</h2>

<div class="frame">
    <h1>User Management</h1>
    <table width="100%" id="user-table">
        <thead>
        <tr>
            <th>Username</th>
            <th>Email</th>
            <th>Full Name</th>
            <th>Date of Birth</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>jd101</td>
            <td>j.doe@somewhere.com</td>
            <td>John Doe</td>
            <td>16-05-1987</td>
            <td><button class="delete">Delete</button></td>
        </tr>
        <tr>
            <td>msmith17</td>
            <td>smithy@nowhere.com</td>
            <td>Jane Smith</td>
            <td>18-08-1988</td>
            <td><button class="delete">Delete</button></td>
        </tr>
        <tr>
            <td>tommy22</td>
            <td>tom@idontknow.com</td>
            <td>Thomas Knowhow</td>
            <td>10-08-1980</td>
            <td><button class="delete">Delete</button></td>
        </tr>
        </tbody>
    </table>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('#user-table').on("click", ".delete", function () {
            var response = confirm("Are you sure you want to delete this user?");
            if (response) {
                $(this).parent().parent().fadeOut().remove();
            }
        });
    });
</script>
